<template>
	<div class="app-container">
		<el-main>
			<el-row :gutter="20" type="flex" align="center">
				<el-col>
					<el-button type="primary" size="mini" @click.native="showAdd()" v-permission="'test_flow_add'">新增</el-button>
				</el-col>
			</el-row>

			<el-table stripe ref="multipleTable" :data="tableData" size="mini" tooltip-effect="dark" v-loading="tabLoading"
			style="width: 100%" border highlight-current-row @selection-change="handleSelectionChange" row-key="id">
				<!-- <el-table-column type="selection" align="center" width="55"></el-table-column> -->
				<el-table-column type="index" label="序号" width="50">
					<template slot-scope="scope">
						<span>{{(listParams.page - 1) * listParams.page_size + scope.$index + 1}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="flow_status" label="状态" align="center" width="120" fixed="right">
					<template slot-scope="scope">
						<el-tag class="names-tag" size="mini" v-if="scope.row.flow_status==3"> {{scope.row.flow_current_node_name}} </el-tag>
						<el-tag class="names-tag" size="mini" v-if="scope.row.flow_status==4" type="success"> {{scope.row.flow_current_node_name}} </el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序" width="80" show-overflow-tooltip sortable fixed="right" />
				<el-table-column label="操作" width="200px" align="center" fixed="right">
					<template slot-scope="scope">
						<div class="operation">
							<el-button icon="el-icon-edit-outline" size="mini" @click.native="onCheck(scope.row)"
							 v-permission="'test_flow_check'" v-show="scope.row.canCheck">通过</el-button>
							 <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click.native="showEdit(scope.row)"
							  v-permission="'test_flow_edit'">编辑</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页数据 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="current"
			 :page-sizes="[10, 20, 50, 100, 200, 500]" :page-size="listParams.page_size" layout="total, sizes, prev, pager, next, jumper"
			 :total="total"></el-pagination>
		</el-main>

		<el-dialog :close-on-click-modal="false" :title="(cuForm.id?'编辑':'新增')" center :visible.sync="dialogCU" width="40%"
		 @close="dialogCUClose('cuForm')">
			<el-form ref="cuForm" v-loading="dialogCULoading" :rules="cuRules" :model="cuForm" label-width="100px" center>
				<el-row class="row-bg">
					<el-col :span="24">
						<el-form-item label="部门" prop="departmentId">
							<el-col :span="22">
								<el-select filterable clearable v-model="cuForm.departmentId" placeholder="请选择部门(用于审核)" style="width:100%" no-data-text="请联系管理员为您关联部门">
									<el-option v-for="item in departmentList" :key="item.id" :label="item.show_name" :value="item.id">
										{{item.show_name}}
									</el-option>
								</el-select>
							</el-col>
						</el-form-item>
						<el-form-item label="名称" prop="name">
							<el-col :span="22">
								<el-input clearable v-model.trim="cuForm.name" placeholder="请输入名称" />
							</el-col>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click.native="dialogCU=false">取 消</el-button>
				<el-button type="primary" @click.native="onSubmit(cuForm.id)">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import {
		list,
		add,
		edit,
		check
	} from '@/api/system/test_flow.js'
	import { list_by_user } from '@/api/system/department.js'
	import {
		Message
	} from 'element-ui';

	export default {
		data() {

			return {
				departmentList:[],
				curDepartment: null,

				// search form
				searchForm: {
				},
				// page option
				total: null, // 总页数
				current: 1, // 当前页

				// list table
				tableData: [], // 列表数据
				selectIds: [], // 多选选项id

				listParams: {
					page: 1,
					page_size: 10
				}, // list参数
				tabLoading: true,
				// CU dialog
				dialogCULoading: false,
				dialogCU: false, // 增修弹框显示

				cuForm: {
					id: null,
					name: null,
					departmentId: null
				},
				cuRules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					departmentId: [{
						required: true,
						message: '请选择部门(用于审核)',
						trigger: 'blur'
					}]
				}
			}
		},
		computed: {},
		created() {
			this.getList()
			this.getDepartmentListByUser()
		},
		mounted: function() {},
		methods: {
			// 新增弹出框
			showAdd() {
				const that = this
				that.dialogCU = true
				that.dialogCULoading = false
				that.resetForm()
				that.$refs['cuForm'] && this.$refs['cuForm'].resetFields()
				this.cuForm.departmentId = this.curDepartment
			},
			showEdit(row) {
				const that = this
				that.cuForm = Object.assign({}, row)
				that.dialogCU = true
				that.dialogCULoading = false
				this.cuForm.departmentId = this.curDepartment
			},
			// 关闭弹窗
			dialogCUClose(formName) {
				const that = this
				switch (formName) {
					case 'cuForm':
						that.$refs['cuForm'].clearValidate()
						that.resetForm()
						break
				}
			},

			resetForm() {
				this.cuForm = {
					id: null,
					name: null,
					departmentId: null
				}
			},

			// 提交数据 增、改
			onSubmit(id) {
				// 表单校验
				this.$refs.cuForm.validate(valid => {
					// ~ 校验通过
					if (valid) {
						var obj = Object.assign({}, this.cuForm)

						// 显示loading
						this.dialogCULoading = true;

						delete obj.created_at
						delete obj.updated_at
						delete obj.deleted_at

						// ~~ 修改
						if (id) {
							this.onEdit(obj);
						} else {
							// ~~ 添加
							delete obj.id
							this.onAdd(obj);
						}
					} else {
						// ~ 不通过
						return false;
					}
				});
			},
			// 审核通过
			onCheck(row){
				this.$confirm('确认要审核通过?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						dangerouslyUseHTMLString: true
					})
					.then(() => {
						check({
							id: row.id,
							nodeId:row.flow_current_node_id
						})
						.then(res => {
							const {
								code,
								message
							} = res
							if (code === 200) {
								Message({
									message,
									type: 'success',
									duration: 1000
								})
								this.getList()
							}
						})
					}).catch()
			},
			// 添加
			onAdd(obj) {
				return add(obj)
					.then(res => {
						const {
							code,
							message
						} = res
						if (code === 200) {
							Message({
								message,
								type: 'success',
								duration: 1000
							})
							this.dialogCU = false
							this.getList()
						}
						this.dialogCULoading = false
					})
					.catch(() => {
						this.dialogCULoading = false
					})
			},

			// 编辑
			onEdit(obj) {
				return edit(obj)
					.then(res => {
						const {
							code,
							message
						} = res
						if (code === 200) {
							Message({
								message,
								type: 'success',
								duration: 1000
							})
							this.dialogCU = false
							this.getList()
						}
						this.dialogCULoading = false
					})
					.catch(() => {
						this.dialogCULoading = false
					})
			},

			// 获得table列表
			getList() {
				this.tabLoading = true
				return list(this.listParams)
					.then(res => {
						let {
							data: {
								records,
								total
							}
						} = res;
						this.tableData = records;
						this.total = total;
						this.tabLoading = false;
					})
					.catch(() => {
						this.tabLoading = false
					})
			},

			getDepartmentListByUser(){
				return list_by_user()
				.then(res => {
					this.departmentList = res.data
					if(res.data.length > 0) this.curDepartment = res.data[0].id
				})
			},

			// 表单多选
			handleSelectionChange(val) {
				this.selectIds = val.map(item => item.id)
			},
			// 分页 -pageSize改变
			handleSizeChange(val) {
				this.listParams.page_size = val
				this.getList()
			},
			// 分页 -pageNum改变
			handleCurrentChange(val) {
				this.listParams.page = val
				this.getList()
			},
			//带状态表格
			tableRowClassName({
				row
			}) {
				if (row.status === 0) {
					return "stop-row";
				}
				return "";
			},
		}
	}
</script>
<style scoped>
	.search .el-form-item:last-child {
		margin-left: 35px;
	}

	.el-date-editor>.el-range-separator {
		width: 8% !important;
	}

	.operation button {
		padding: 8px;
	}

	.el-pagination {
		margin-top: 40px;
	}
</style>
<style lang="scss" scoped>
	.app-container {
		.el-table {
			margin-top: 20px;

			.stop-row {}
		}

		.custom-tree-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			padding-right: 8px;
		}
	}
</style>

